import React, {useEffect, useState} from "react";
import {Form, Input, message, Modal, TreeSelect} from "antd";
import {FormComponentProps} from "antd/es/form";
import api from '@/services'
import {getAccessToken} from '@/utils/authority';

const {TreeNode} = TreeSelect;

interface Props extends FormComponentProps {
  data: any,
  close: Function,
  save: Function,
  orgIdData: any
}
interface State {
  tenantName:any[]
}
const Save = (props: Props) => {
  const initState: State = {
    tenantName:[]
  };
  const {form, form: {getFieldDecorator}} = props;
  const [categoryList, setCategoryList] = useState([]);
  const token = getAccessToken();
  const [tenantName,setTenantName] = useState(initState.tenantName);

 
  useEffect(() => {
    console.log(props.data)
    api.categoty.queryNoPaging({}).then(res => {
      if (res.status === 200) {
        let list: any = [];
        res.result.map((item: any) => {
          list.push({ id: item.id, pId: item.parentId, value: item.id, title: item.name })
        });
        setCategoryList(list);
      }
    })
  }, []);

  const save = () => {
    form.validateFields((err, fileValue) => {
      if (err) return;

      fileValue.type = 'big_screen';
      fileValue.metaData = '';
      fileValue.target="";
      fileValue.id = props.data.id
      fileValue.state = {
        text: "启用",
        value: "enabled"
      };
      fileValue.orgName = tenantName;
      if(props.data.id){
        api.configuration.update(props.data.id,fileValue).then(res => {
          if (res.status === 200) {
            console.log(res)
            props.save();
            window.open('http://'+ window.location.hostname + `:8865/?id=${res.result.id}&token=${token}`, '_blank')
            // window.open('http://'+ window.location.hostname + `:8866/?id=${res.result.id}&token=${token}`, '_blank')
            // window.open(`http://localhost:8080/?id=${res.result.id}&token=${token}`, '_blank')
            // window.open(`http://10.87.221.100:8080/?id=${res.result.id}&token=${token}`, '_blank')
          }
        })
      }else{
        api.configuration.save(fileValue).then(res => {
          if (res.status === 200) {
            console.log(res)
            props.save();
            window.open('http://'+ window.location.hostname + `:8865/?id=${res.result.id}&token=${token}`, '_blank')
            // window.open('http://'+ window.location.hostname + `:8866/?id=${res.result.id}&token=${token}`, '_blank')
            // window.open(`http://localhost:8080/?id=${res.result.id}&token=${token}`, '_blank')
            // window.open(`http://10.87.221.100:8080/?id=${res.result.id}&token=${token}`, '_blank')
          }
        })
      }
    })
  };

  let getView = (view: any) => {
    return (
      <TreeNode title={view.name} value={view.id} key={view.id}>
        {
          view.children && view.children.length > 0 ? view.children.map((v: any) => {
            return getView(v)
          }) : ''
        }
      </TreeNode>
    )
  };
  const jgChange = (e,obj)=>{
    obj.map((item:any) =>{
        setTenantName(item)
    })
  };
  return (
    <Modal
      visible
      title="编辑组态"
      onCancel={() => props.close()}
      onOk={() => {
        save()
      }}
    >
      <Form labelCol={{span: 4}} wrapperCol={{span: 20}}>
      <Form.Item key="dmName" label="组态名称">
          {getFieldDecorator('dmName', {
            rules: [{ required: true, message: '请输入组态名称' },],
            initialValue: props.data.dmName ? props.data.dmName : ''
          })(<Input placeholder="请输入组态名称" />)}
        </Form.Item>
        <Form.Item key="orgId" label="所属机构">
            {getFieldDecorator('orgId', {
                initialValue: props.data.orgId ? props.data.orgId : '',
                rules: [{required: true,message: '请选择所属机构'}],
            })(
                <TreeSelect
                allowClear treeDataSimpleMode showSearch
                placeholder="所属机构" treeData={props.orgIdData}
                treeNodeFilterProp='title' searchPlaceholder='根据机构名称模糊查询'
                onChange={jgChange}/>
            )}
        </Form.Item>
      </Form>
    </Modal>
  )
};
export default Form.create<Props>()(Save);
